<template>
  <div class="admin-container">
    <el-container>
      <!-- 左边区域 -->
      <el-aside :width="asideWidth" style="margin-right: 10px; min-height: 97vh; background-color: #001629">
        <div style="
            height: 60px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
          ">
          <span style="margin-left: 10px; font-size: 35px" v-show="!isCollapse">
            BlogHub</span>
        </div>
        <!-- 左边菜单 -->
        <el-menu :collapse="isCollapse" :collapse-transition="false" style="border: none" background-color="#001629"
          text-color="rgba(255,255,255,0.65)" active-text-color="white" router :default-active="$route.path">
          <el-menu-item index="/admin">
            <i class="iconfont icon-shujukanban" style="padding-right: 10px;"></i>
            <span slot="title">文章总览大屏</span>
          </el-menu-item>
          <el-menu-item index="/admin/userManage">
            <i class="iconfont icon-user-manage" style="padding-right: 10px;"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-submenu index="/admin/articleManage">
            <template slot="title">
              <i class="iconfont icon-wenzhangguanli" style="padding-right: 10px;"></i>
              <span>文章管理</span>
            </template>
            <el-menu-item index="/admin/articleManage">用户文章管理</el-menu-item>
            <el-menu-item index="/admin/category">文章类型管理</el-menu-item>
          </el-submenu>
          <el-submenu index="/admin/inf">
            <template slot="title">
              <i class="iconfont icon-gerenxinxiguanli" style="padding-right: 10px;"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/admin/inf">个人信息</el-menu-item>
            <el-menu-item index="/admin/updatepwd">修改密码</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右边区域 -->
      <el-container>
        <!-- 头部区域 -->
        <el-header>
          <i :class="collapseIcon" style="font-size: 26px" @click="handleCollapse"></i>
          <span style="margin-left: 10px">身份：{{ user.role }}</span>
          <div style="padding-left: 100px;">
          </div>
          <div style="
              flex: 1;
              width: 0;
              display: flex;
              align-items: center;
              justify-content: flex-end;
            ">
            <el-dropdown placement="bottom">
              <div style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                ">
                <span><el-image style="height: 40px;width: 40px;border-radius: 50%;"
                    :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"></el-image></span>
                <span style="margin-left: 10px">{{ user.username }}</span>
              </div>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="$router.push('/')">返回首页</el-dropdown-item>
                <el-dropdown-item @click.native="$router.push('/admin/inf')">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="$router.push('/admin/updatepwd')">修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <!-- 主体区域 -->
        <el-main>
          <transition name="slide-up" mode="out-in">
            <router-view :key="$route.fullPath"></router-view>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: JSON.parse(localStorage.getItem('user') || '{}'),
      isCollapse: false,
      asideWidth: "180px",
      collapseIcon: "el-icon-s-fold",
    };
  },
  methods: {
    logout() {
      this.$router.push("/login");
      this.$message.success("退出成功");
      localStorage.removeItem("user");
      localStorage.removeItem("token");
    },
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.asideWidth = this.isCollapse ? "64px" : "180px";
      this.collapseIcon = this.isCollapse
        ? "el-icon-s-unfold"
        : "el-icon-s-fold";
    },
  },
};
</script>

<style>
.admin-container .slide-up-enter-active,
.admin-container .slide-up-leave-active {
  transition: transform 0.5s, opacity 0.5s;
}

.admin-container .slide-up-enter,
.admin-container .slide-up-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

.admin-container .slide-up-enter-to,
.admin-container .slide-up-leave {
  transform: translateY(0);
  opacity: 1;
}

.admin-container .el-menu--inline {
  background-color: #000c17 !important;
}

.admin-container .el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
  padding-left: 49px !important;
}

.admin-container .el-menu-item:hover,
.admin-container .el-submenu__title:hover {
  color: #fff !important;
}

.admin-container .el-submenu__title:hover i {
  color: #fff !important;
}

.admin-container .el-menu-item.is-active {
  background-color: #1890ff !important;
  border-radius: 10px;
  width: calc(100% - 8px);
  margin-left: 4px;
}

.admin-container .el-menu-item.is-active i,
.admin-container .el-menu-item.is-active .el-tooltip {
  margin-left: -2px;
}

.admin-container .el-menu-item,
.admin-container .el-submenu__title,
.admin-container .el-submenu .el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}

.admin-container .el-submenu .el-menu-item {
  margin: 4px !important;
  min-width: 0 !important;
}

.admin-container .el-aside {
  transition: width 0.15s;
  box-shadow: 2px 0 3px rgba(0, 21, 41, 35);
}

.admin-container .el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, 35);
  display: flex;
  align-items: center;
}

.admin-container .el-main {
  padding: 0px !important;
  border: 2px solid #cccccc;
  margin-top: 10px;
  box-shadow: 2px 0 6px #cccccc;
}
</style>
